<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>模板语法</h2>
      <!-- 最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)： -->
      <!-- 变量或者表达式或者函数调用 -->
      <p>{{ msg + "?????" }}</p>
      <p>{{ fn() }}</p>
      <button v-on:click="msg += '!'">btn</button>

      <!-- 如果需要渲染成html的标签，可以使用v-html指令 -->
      <!-- <div>{{ content }}</div> -->
      <div v-html="content"></div>

      <!-- 属性要使用变量，需要使用v-bind指令 -->
      <!-- v-bind指令可以简写成: -->
      <p v-bind:title="str">hello</p>
      <img :src="imgUrl" alt="" />
      <!-- 对于布尔值，v-bind表示是否添加该属性 -->
      <button :disabled="isButtonDisabled" v-on:click="key = 'src'">
        Button
      </button>

      <!-- <div :id="objectOfAttrs.id" :class="objectOfAttrs.class">123</div> -->
      <div v-bind="objectOfAttrs">123</div>

      <p v-bind:[title2]="doSomething">doSomething</p>

      <img :[key]="imgUrl" alt="" />
    </div>

    <script src="./Vue3.js"></script>
    <script>
      const { createApp } = Vue;
      createApp({
        // data选项
        // html里面要使用到的变量，必须要写在data里面
        // data响应式数据，data的数据改变了，页面会自动重新渲染
        data() {
          return {
            msg: "hello vue",
            content: "<h1>haha</h1>",
            str: "abc",
            imgUrl:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            isButtonDisabled: false,
            objectOfAttrs: {
              id: "container",
              class: "wrapper",
            },
            doSomething: "123",
            title2: "title",
            key: "data",
          };
        },

        methods: {
          fn() {
            return "fn1";
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
